

<div ref:stage>

  <svg width={width} height={height}>
      <g transform={transformString}>
        {#each ticks as x}
          {#each ticks as y}
            <rect stroke="black" fill="white" width={width / 10} height={height / 10} x={x * 40} y={y * 40}/>
          {/each}
        {/each}
        <circle stroke="cyan" fill="none" stroke-width=1 r=4 cx={width * gcx} cy={height * gcy}/>
      </g>
      <circle stroke="red" fill="none" stroke-width=1 r=8 cx={width * scx} cy={height * scy}/>
  </svg>


  <Zoom 
    ref:zoom
    bind:scale
    bind:translateX
    bind:translateY
    bind:gcx
    bind:gcy
    bind:scx
    bind:scy
    bind:width
    bind:height
    bind:transformString
  />



  <button on:click="refs.zoom.transitionTo(0.25, 0.25, 0.5)">zoom1</button>
  <button on:click="refs.zoom.transitionTo(0.875, 0.875, 4)">zoom2</button>
  <button on:click="refs.zoom.transitionTo(0.75, 0.75, 4)">zoom4</button>
  <button on:click="refs.zoom.transitionTo(0.5, 0.5, 1)">home</button>
  <button on:click="refs.zoom.transitionTo(0.5, 0.5, 2)">home2</button>
  <button on:click="refs.zoom.scaleTo(2)">scale2</button>
  <button on:click="refs.zoom.panTo(0.25, 0.25)">panTo2525</button>
  <button on:click="refs.zoom.panTo(0.5, 0.25)">panTo525</button>

  <div>Scale: <input type="range" min=0.1 max=10 step=0.01 bind:value=scale> {scale}</div>

</div>

<script>

export default {
  components: {
    Zoom: "../Zoom.html"
  },
  data() {
    return {
      ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      scale: 1.0,
      width: 400,
      height: 400
    };
  },
  oncreate() {

  }
}

</script>
